<template>
    <div class="white-box-form">
        <el-form
            ref="ruleRef"
            :model="state.ruleForm"
            :rules="state.rules"
            label-width="120px"
            class="mt-20"
        >
            <el-form-item v-if="!isEdit" label="菜单类型" prop="type">
                <el-radio-group v-model="state.ruleForm.type">
                    <el-radio
                        v-for="item in state.menuTypeList"
                        :key="item.memberKey"
                        :value="item.memberKey"
                        >{{ item.memberName }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName">
                <el-input
                    v-model.trim="state.ruleForm.menuName"
                    clearable
                    placeholder="请输入菜单名称"
                />
            </el-form-item>

            <template v-if="state.ruleForm.type === 10">
                <el-form-item label="是否为外链" prop="isFrame">
                    <el-switch
                        v-model="state.ruleForm.isFrame"
                        inline-prompt
                        active-text="是"
                        inactive-text="否"
                        :active-value="0"
                        :inactive-value="1"
                    />
                </el-form-item>
                <el-form-item
                    :label="state.ruleForm.isFrame ? '路由地址' : '外链地址'"
                    prop="path"
                >
                    <el-input
                        v-model.trim="state.ruleForm.path"
                        clearable
                        :placeholder="
                            state.ruleForm.isFrame
                                ? '请输入路由地址'
                                : '请输入外链地址'
                        "
                    />
                </el-form-item>
                <el-form-item label="路由参数" prop="query">
                    <el-input
                        v-model.trim="state.ruleForm.query"
                        clearable
                        placeholder="请输入路由参数"
                    />
                </el-form-item>
            </template>

            <template v-if="state.ruleForm.type !== 0">
                <el-form-item
                    v-if="!isEdit"
                    label="上级菜单"
                    prop="parentTreeCode"
                >
                    <el-tree-select
                        v-model="state.ruleForm.parentTreeCode"
                        :data="parentTreeOptions"
                        filterable
                        check-strictly
                        :props="treeSelectProps"
                        placeholder="请选择上级菜单"
                        clearable
                    >
                        <template #default="{ data: { menuName } }">
                            {{ menuName }}</template
                        >
                        <template #label="{ label: { menuName, permission } }">
                            <span>{{ menuName }}</span>
                            <span class="color-gray"
                                >&nbsp;{{ permission }}</span
                            >
                        </template>
                    </el-tree-select>
                </el-form-item>
                <el-form-item label="权限标识" prop="permission">
                    <el-input
                        v-model.trim="state.ruleForm.permission"
                        clearable
                        placeholder="请输入权限标识"
                    />
                    <div class="input-tips">
                        下级菜单权限标识前部分必须包含上级菜单权限标识
                    </div>
                </el-form-item>
            </template>

            <el-form-item
                v-if="state.ruleForm.type === 0"
                label="菜单图标"
                prop="icon"
            >
                <IconSelect v-model="state.ruleForm.icon" />
            </el-form-item>
            <el-form-item label="显示顺序" prop="viewSort">
                <el-input-number
                    v-model="state.ruleForm.viewSort"
                    :min="0"
                    :precision="0"
                    step-strictly
                />
            </el-form-item>
            <el-form-item label="备注" prop="note">
                <el-input
                    v-model.trim="state.ruleForm.note"
                    type="textarea"
                    maxlength="100"
                    :autosize="{ minRows: 2 }"
                    clearable
                    show-word-limit
                    placeholder="请输入备注"
                />
            </el-form-item>
            <el-form-item label="是否可删除" prop="deletable">
                <el-radio-group v-model="state.ruleForm.deletable">
                    <el-radio
                        v-for="item in state.deletableList"
                        :key="item.memberKey"
                        :value="item.memberKey"
                        :disabled="state.disabledDeletable"
                        >{{ item.memberName }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>

            <el-form-item label="是否显示菜单" prop="visible">
                <el-switch
                    v-model="state.ruleForm.visible"
                    inline-prompt
                    active-text="显示"
                    inactive-text="隐藏"
                    :active-value="0"
                    :inactive-value="1"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="state.ruleForm.status">
                    <el-radio
                        v-for="item in state.statusList"
                        :key="item.memberKey"
                        :value="item.memberKey"
                        >{{ item.memberName }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
        </el-form>

        <div class="foot-btn">
            <el-button
                type="primary"
                :loading="state.form_loading"
                @click="submitForm(ruleRef)"
            >
                {{ isEdit ? "修改" : "添加" }}
            </el-button>
        </div>
        <go-back />
    </div>
</template>

<script setup>
import { inject, ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import GoBack from "@components/GoBack.vue";
import {
    getMiniMenusTree,
    getMiniMenuDetail,
    addMiniMenu,
    editMiniMenu,
} from "@/apis/system/menu";
import IconSelect from "@components/IconSelect.vue";

import { useDictStore } from "@stores/dict.js";

const dictStore = useDictStore();
dictStore.getDictMembers("data_status").then((res) => (state.statusList = res));
dictStore.getDictMembers("menu_type").then((res) => (state.menuTypeList = res));
dictStore
    .getDictMembers("deletable")
    .then((res) => (state.deletableList = res));

const $message = inject("$message");
const router = useRouter();
const route = useRoute();

const sid = route.query.sid;
const form_loading = ref(false);
const ruleRef = ref(null);
const isEdit = ref(false);

const state = reactive({
    statusList: [],
    menuTypeList: [],
    deletableList: [],
    ruleForm: {
        status: 0,
        deletable: 0,
        menuName: null,
        viewSort: 0,
        path: null,
        component: null,
        query: null,
        isFrame: 1,
        type: 0,
        visible: 0,
        permission: null,
        icon: null,
        note: null,
        parentTreeCode: null,
    },
    rules: {
        // component: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
        permission: [
            { required: true, message: "请输入权限标识", trigger: "blur" },
        ],
        menuName: [
            { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        parentTreeCode: [
            { required: true, message: "请选择上级菜单", trigger: "blur" },
        ],
        icon: [{ required: true, message: "请选择菜单图标", trigger: "blur" }],
        // path: [{ required: true, message: '请输入路由地址', trigger: 'blur' }],
        type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
    },
    disabledDeletable: false,
});

onMounted(() => {
    if (/Edit$/.test(route.name)) {
        isEdit.value = true;
        getDetail();
    } else {
        getParentTreeOptions();
    }
});

const getDetail = async () => {
    const res = await getMiniMenuDetail({ sid });
    if (res.data.code == 200) {
        state.ruleForm = res.data.data;
        state.disabledDeletable = state.ruleForm.deletable === 1;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const parentTreeOptions = reactive([]);
const treeSelectProps = {
    value: "treeCode",
    label: ({ menuName, permission }) => {
        return {
            menuName,
            permission,
        };
    },
};
const getParentTreeOptions = async () => {
    const res = await getMiniMenusTree();
    if (res.data.code == 200) {
        Object.assign(parentTreeOptions, res.data.data);
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
        if (valid) {
            form_loading.value = true;
            let res = null;
            if (isEdit.value) {
                res = await editMiniMenu(state.ruleForm);
            } else {
                res = await addMiniMenu(state.ruleForm);
            }
            form_loading.value = false;
            if (res.data.code == 200) {
                $message({
                    message: isEdit.value ? "修改成功" : "添加成功",
                    type: "success",
                });
                router.back();
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        }
    });
};
</script>
